<template>
	<view class="list-page">
		<!-- 固定部分 -->
		<view class="fixed-header">
			<!-- 顶部标题和分享按钮 -->
			<view class="header">
				<text class="title">榜单</text>
				<image class="share-icon" src="/static/date.png" mode="aspectFit" @tap="goToSignIn"></image>
			</view>
			
			<!-- 统计卡片 -->
			<view class="stats-card" style="margin-top: 20px;">
				<view class="stat-item">
					<text class="number">{{ranking}}</text>
					<text class="label">排名</text>
				</view>
				<view class="stat-item">
					<text class="number">{{count}}</text>
					<text class="label">累计签到</text>
				</view>
			</view>
		</view>

		<!-- 可滚动的用户列表 -->
		<scroll-view class="scroll-area" scroll-y>
			<view class="user-list" style="padding-top: 50px;padding-bottom: 30px;">
				<!-- 用户项 -->
				<view v-for="(item,index) in list" :key="item.username" :class="{active:index+1===ranking}" class="user-item" style="margin-top: 20px;">
					<image class="avatar" src="/static/squirrel.png" mode="aspectFit"></image>
					<view class="info">
						<text class="name">{{index+1}} . {{item.username}}</text>
					</view>
					<text class="days">{{item.count}}天</text>
				</view>
			</view>
		</scroll-view>

		<!-- 底部导航栏 -->
		<view class="tab-bar">
			<view class="tab-item" @tap="goToMain">
				<view class="icon-wrapper">
					<image src="/static/main.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="tab-item active">
				<view class="icon-wrapper">
					<image src="/static/trophy.png" mode="aspectFit"></image>
				</view>
			</view>
			<view class="tab-item" @tap="goToMy">
				<view class="icon-wrapper">
					<image src="/static/achievement.png" mode="aspectFit"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import { ref } from 'vue';
import http from '../../utils/request';
	
const list=ref([]);
const ranking=ref();
const count=ref();
	http.post('/getSignInList',{username:localStorage.getItem("username")})
	.then(res=>{
		ranking.value=res.data.userRank;
		count.value=res.data.list[ranking.value-1].count;
		list.value=res.data.list
	})
// 页面跳转
const goToMain = () => {
	uni.redirectTo({ url: '/pages/main/main' })
}

const goToMy = () => {
	uni.redirectTo({ url: '/pages/my/my' })
}

let flag=false;

// 跳转到签到页面
const goToSignIn = () => {
	if(!flag){
		count.value++;	
		flag=true;
	}

	uni.navigateTo({
		url: '/pages/sign_in/sign_in'
	})
}
</script>

<style lang="scss">
.list-page {
	min-height: 100vh;
	background-color: #E8F6F6;
	position: relative;
	overflow: hidden;
}

.fixed-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;
	background-color: #E8F6F6;
	padding: 60rpx 30rpx 20rpx;
	box-shadow: 0 4rpx 8rpx rgba(0, 0, 0, 0.05);
}

.header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 30px;
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.share-icon {
		width: 48rpx;
		height: 48rpx;
	}
}

.stats-card {
	background: #5CD3D3;
	border-radius: 20rpx;
	padding: 20rpx;
	display: flex;
	justify-content: space-around;
	margin-bottom: 40rpx;
	
	.stat-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		
		.number {
			font-size: 48rpx;
			color: #FFFFFF;
			font-weight: bold;
			margin-bottom: 8rpx;
		}
		
		.label {
			font-size: 28rpx;
			color: #FFFFFF;
		}
	}
}

.scroll-area {
	height: calc(100vh - 340rpx);  // 减去固定头部和底部导航的高度
	margin-top: 340rpx;  // 增加顶部间距，避免第一个用户被遮挡
	padding: 0 30rpx;
	box-sizing: border-box;
	padding-bottom: 40rpx;  // 添加底部内边距，避免最后一个用户被遮挡
}

.user-list {
	padding-top: 10rpx;  // 为列表添加一点顶部间距
	.user-item {
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 30rpx;
		display: flex;
		align-items: center;
		margin-bottom: 24rpx;
		
		&.active {
			border: 2rpx solid #5CD3D3;
		}

		.avatar {
					
			width: 90rpx;
			height: 90rpx;
			border-radius: 50%;
			margin-right: 24rpx;
		
		}
		
		.info {
			flex: 1;
			
			.name {
				font-size: 32rpx;
				color: #333;
				margin-bottom: 8rpx;
				margin-right: 10rpx;
			}
			
			.level {
				font-size: 26rpx;
				color: #666;
			}
		}
		
		.days {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
	}
}

.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background: #FFFFFF;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding: 0 30rpx;
	padding-bottom: env(safe-area-inset-bottom);
	box-shadow: 0 -1rpx 6rpx rgba(0, 0, 0, 0.05);
	z-index: 1;
	
	.tab-item {
		flex: 1;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 0 10rpx;
		
		.icon-wrapper {
			width: 100rpx;
			height: 70rpx;
			background-color: #5CD3D3;
			border-radius: 16rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 0.9;
		}
		
		image {
			width: 40rpx;
			height: 40rpx;
		}
		
		&.active .icon-wrapper {
			opacity: 1;
		}
	}
}
</style>
